<template>
    <div class="receive_r">
      <w-breadcrumb style="font-size: 14px;margin-left:5px" separator="/">
        <w-breadcrumb-item>我的收货订单</w-breadcrumb-item>
        <w-breadcrumb-item>收货订单列表</w-breadcrumb-item>
      </w-breadcrumb>
      <div class="receiveOrder_table">
        <w-tabs type="card" v-model="activeName" @tab-click="handleChangeTag" class="receive_list">
        <w-tab-pane class="receiveTap_" label="进行中" name="first">
          <w-table
          :default-sort = "{prop: 'orderTime', order: 'descending'}"
            :data="
              inTableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            class="receive_item"
          >
            <w-table-column
              prop="id"
              label="订单号"
              label-class-name="receiveItem_t"
              width="120"
            ></w-table-column>
            <w-table-column
              prop="type"
              label="货物名称"
              width="120"
            ></w-table-column>
            <w-table-column
              prop="orderTime"
              label="下单时间"
              width="170"
              sortable
            ></w-table-column>
            <w-table-column
              prop="sendName"
              label="发货人姓名"
              width="130"
            ></w-table-column>
            <w-table-column
              prop="sendPhone"
              label="发货人手机号"
              width="160"
            ></w-table-column>
            <w-table-column
              prop="value"
              label="运费"
              width="120"
            ></w-table-column>
            <w-table-column label="操作">
              <template slot-scope="scope">
                <w-button
                  @click="checkDetail(scope.row.id)"
                  type="text"
                  size="small"
                  >查看具体信息</w-button
                >
              </template>
            </w-table-column>
          </w-table>
          <w-pagination
            class="receive_bottom"
            @current-change="current_change"
            :current-page="currentPage"
            small
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="inTableData.length"
          >
          </w-pagination>
        </w-tab-pane>
        <w-tab-pane label="已签收">
          <w-table
          :default-sort = "{prop: 'timeFinish', order: 'descending'}"
            :data="
              finishTableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            class="receive_item"
          >
            <w-table-column
              prop="id"
              label="订单号"
              label-class-name="receiveItem_t"
              width="120"
            ></w-table-column>
            <w-table-column
              prop="type"
              label="货物名称"
              width="120"
            ></w-table-column>
            <w-table-column
              prop="sendName"
              label="发货人姓名"
              width="130"
            ></w-table-column>
            <w-table-column
              prop="sendPhone"
              label="发货人手机号"
              width="160"
            ></w-table-column>
            <w-table-column
              prop="value"
              label="运费"
              width="120"
            ></w-table-column>
            <w-table-column
            sortable
              prop="finishTime"
              label="完成时间"
              width="180"
            >
            </w-table-column>
            <w-table-column label="操作">
              <template slot-scope="scope">
                <w-button
                  @click="checkDetail(scope.row.id)"
                  type="text"
                  size="small"
                  >查看具体信息</w-button
                >
              </template>
            </w-table-column>
          </w-table>
          <w-pagination
            class="receive_bottom_y"
            @current-change="current_change"
            :current-page="currentPage"
            small
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="finishTableData.length"
          ></w-pagination>
        </w-tab-pane>
        </w-tabs>
      </div>
    </div>
</template>

<script>
export default {
  name: "Receive",
  data() {
    return {
      activeName: "first",
      pageSize: 3,
      currentPage: 1,
      inTableData: [],
      finishTableData: []
    };
  },
  methods: {
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
    checkDetail(msg) {
      localStorage.setItem("route", this.$route.path);
      localStorage.setItem("pageNo", this.currentPage);
      this.$router.push({
        name: "shouhuoxinxi",
        query: {
          id: msg
        },
      });
      
    },
    getReceiveTable(){
      let phone = localStorage.getItem('phone')
      this.$axios({
        method:"GET",
        url:"http://1.15.170.222:88/api/order/user/getMyOnWayReceiveOrdersByPhone/" + phone
      }).then((response) => {
        console.log(response);
        this.inTableData = response.data.data;
      })
      this.$axios({
        method:"GET",
        url:"http://1.15.170.222:88/api/order/user/getMyOverReceiveOrdersByPhone/" + phone
      }).then((response) => {
        console.log(response);
        this.finishTableData = response.data.data;
      })
    },
    handleChangeTag() {
      localStorage.removeItem("route");
      localStorage.removeItem("pageNo");
      this.currentPage = 1;
    },
  },
  // created() {
  //   // this.getReceiveTable();
  //   // this.currentPage_ = localStorage.getItem("pageNo");
  //   // if (this.currentPage_ != undefined) {
  //   //   this.currentPage = Number(this.currentPage_);
  //   //   localStorage.removeItem('pageNo')
  //   // }
  // },
  created() {
    this.getReceiveTable();
    let pageNo = localStorage.getItem("pageNo");
    let route = localStorage.getItem("route");
    if (route === this.$route.path) {
      this.currentPage = Number(pageNo);
    }
    localStorage.removeItem("pageNo");
    localStorage.removeItem("route");
  },
};
</script>

<style>
body {
  background-color: #fff;
}
.receive_r {
  padding-top: 40px;
  padding-left: 82px;
  width: 1050px;
  height: 680px;
  display: flex;
  flex-direction: column;
}
.receiveOrder_table {
  width: 980px;
  margin: 0 auto;
}
.receive_list {
  padding-top: 40px;
}
.receive_item {
  font-size: 14px;
  margin-bottom: 40px;
}
.receiveItem_t {
  font-size: 14px;
}
.receive_bottom,
.receive_bottom_y {
  display: flex;
  height: 30px;
  justify-content: center;
}
</style>
